<template>
  <div>
    <crumb isShowBack/>
    <div class="main-contianer3 caseManage">
      <div class="top-content">
        <div class="main">
          <div class="main-left">
            <div class="case-tip">案例标题: {{cases.caseName}}</div>
            <div class="case-tip">案例要求</div>
            <div class="case-con">
              <span>{{cases.caseRequest || ''}}</span>
            </div>
            <div class="case-box" style="border-top: 1px solid #ccc;">
              <div class="case-tip">共有{{finishs.finishedList.length}}人完成本案例</div>
              <el-button type="text" @click="isShowExcellent=true">更多<i class="el-icon-arrow-right"></i></el-button>
            </div>
            <div class="case-manBox">
              <div class="case-man" v-for="(item, index) in finishs.finishedList" :key="index">
                <div class="case-logo">
                  <img :src="item.headImgUrl" alt="">
                </div>
                <div class="case-name">{{item.stuName}}</div>
              </div>
            </div>
            <div class="train-tips">
              <div class="train-title">训练报告</div>
              <div class="train-time">{{createdTime}}</div>
            </div>
            <div class="train-chartBox">
              <tj-circle :circelData="circelData"/>
            </div>
          </div>
          <div class="main-right">
            <div class="comment-state">我的案例分析</div>
            <div class="online-note" style="height: 300px;">{{result}}</div>
            <div class="comment-state" v-if="cases.isShowAnaylse === '1'">案例范文</div>
            <div class="online-note" v-if="cases.isShowAnaylse === '1'" style="height: 300px;">{{cases.caseAnswerAnaylse}}</div>
          </div>
        </div>
      </div>
    </div>
    <excellent-box :id="id" v-if="isShowExcellent" @handleEmit="isShowExcellent=false"/>
  </div>
</template>

<script>
import { caseAnalyseMain, caseAnalyseReport, finishedList } from '@/api/student/training/caseAnalyse'
import tjCircle from './Circle'
import excellentBox from './excellentBox'
export default {
  name: 'caseAnalyseReport',
  data () {
    return {
      id: this.$route.query.id,
      batchId: '',
      createdTime: '',
      cases: {
        caseAnswerAnaylse: '',
        caseId: '',
        caseName: '',
        caseRequest: '',
        icon: '',
        isScored: '',
        isShowAnaylse: '',
        maxduration: '',
        maxscore: '',
        rank: '',
        result: '',
        userName: ''
      },
      finishs: {
        caseName: '',
        caseRequest: '',
        className: '',
        finishedList: [],
        finishedSize: ''
      },
      result: '',
      circelData: [{
        name: '时长',
        text: '15’30',
        percentage: 0
      }, {
        name: '得分',
        text: '80',
        percentage: 0,
        status: 'success'
      }, {
        name: '排名',
        text: '17',
        percentage: 0,
        // status有三种形式
        // warning 黄色 success 绿色
        status: 'warning'
      }],
      isShowExcellent: false
    }
  },
  mounted () {
    this.caseAnalyseMain()
  },
  methods: {
    async caseAnalyseMain () {
      const res = await caseAnalyseMain({
        resourceCaseId: this.id
      })
      if (res.code === '200') {
        console.log(res.data)
        this.batchId = res.data.lastRecordId
        this.createdTime = res.data.createdTime
        this.caseAnalyseReport()
      } else {
        this.$message.error(res.message)
      }
    },
    async caseAnalyseReport () {
      const res = await caseAnalyseReport({
        caseAnalyseBatchId: this.batchId
      })
      if (res.code === '200') {
        this.cases = res.data
        this.finishedList()
        this.circelData[0].text = this.returnDate(this.cases.maxduration)
        this.circelData[0].percentage = Number(this.cases.maxduration / (60 * 15) * 100) <= 100 ? Number(this.cases.maxduration / (60 * 15) * 100) : 100
        this.circelData[1].text = Number(this.cases.maxscore)
        this.circelData[1].percentage = Number(this.cases.maxscore / 100 * 100) < 100 ? Number(this.cases.maxscore / 100 * 100) : 100
        this.circelData[2].text = Number(this.cases.rank)
        if (this.cases.result) {
          this.result = JSON.parse(this.cases.result)[0].result || ''
        }
      } else {
        this.$message.error(res.message)
      }
    },
    async finishedList () {
      const res = await finishedList({
        resourceCaseId: this.id
      })
      if (res.code === '200') {
        console.log(res.data)
        this.finishs = res.data
        this.circelData[2].percentage = Number(this.cases.rank / this.finishs.finishedList.length) < 100 ? Number(this.cases.rank / this.finishs.finishedList.length) : 100
        this.finishs.finishedList = this.finishs.finishedList.slice(0, 9)
      } else {
        this.$message.error(res.message)
      }
    },
    returnDate (time) {
      if (time < 60) {
        return time < 10 ? '00:0' + time : '00:' + time
      } else if (time < 3600) {
        return Math.floor(time / 60) < 10 ? '0' + Math.floor(time / 60) + ':' + (time % 60 < 10 ? '0' + time % 60 : time % 60) : Math.floor(time / 60) + ':' + (time % 60 < 10 ? '0' + time % 60 : time % 60)
      } else {
        return '大于一小时'
      }
    }
  },
  components: {
    tjCircle,
    excellentBox
  }
}
</script>
<style scoped lang="scss" rel="stylesheet/scss">
.caseManage {
  .top-content {
    width: 100%;
    background: #fff;
    .main {
      width: 1200px;
      margin: 0 auto;
      .main-left {
        width: 760px;
        height: 700px;
        float: left;
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(229, 229, 229, 1);
        box-sizing: border-box;
        padding: 10px;
        border-radius: 5px;
        overflow: auto;
      }
      .main-right {
        width: calc(100% - 760px - 10px);
        height: 700px;
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(229, 229, 229, 1);
        border-radius: 5px;
        float: right;
        padding: 0 0 10px;
        position: relative;
        overflow-y: scroll;
      }
    }
  }
}
</style>
